<template>
  <div class="cube-box" :style="defaultStyle" :class="isActiveClass">
    <div
      v-if="contentData.default_sub_list.length !== 0"
      class="cube-content"
      :style="contentStyle"
    >
      <template v-if="contentData.layout === 'row-2'">
        <div class="cube-style cube-style-row-2" :style="gridGapStyle">
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
            />
          </div>
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
            />
          </div>
        </div>
      </template>

      <template v-if="contentData.layout === 'row-3'">
        <div class="cube-style cube-style-row-3" :style="gridGapStyle">
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
            />
          </div>
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
            />
          </div>
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[2]"
              :src="contentData.default_sub_list[2]"
              class="itemImg"
            />
          </div>
        </div>
      </template>

      <template v-if="contentData.layout === 'left-1-right-2'">
        <div class="cube-style cube-style-left-1-right-2" :style="gridGapStyle">
          <div class="cube-item left" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
            />
          </div>
          <div class="cube-item right-top" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
            />
          </div>
          <div class="cube-item right-bottom" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[2]"
              :src="contentData.default_sub_list[2]"
              class="itemImg"
            />
          </div>
        </div>
      </template>

      <template v-if="contentData.layout === 'top-1-bottom-2'">
        <div class="cube-style cube-style-top-1-bottom-2" :style="gridGapStyle">
          <div class="cube-item top" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
            />
          </div>
          <div class="cube-item bottom-left" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
            />
          </div>
          <div class="cube-item bottom-right" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[2]"
              :src="contentData.default_sub_list[2]"
              class="itemImg"
            />
          </div>
        </div>
      </template>

      <template v-if="contentData.layout === 'left-2-right-1'">
        <div class="cube-style cube-style-left-2-right-1" :style="gridGapStyle">
          <div class="cube-item left-top" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
            />
          </div>
          <div class="cube-item left-bottom" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
            />
          </div>
          <div class="cube-item right" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[2]"
              :src="contentData.default_sub_list[2]"
              class="itemImg"
            />
          </div>
        </div>
      </template>

      <template v-if="contentData.layout === 'top-2-bottom-1'">
        <div class="cube-style cube-style-top-2-bottom-1" :style="gridGapStyle">
          <div class="cube-item top-left" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
            />
          </div>
          <div class="cube-item top-right" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
            />
          </div>
          <div class="cube-item bottom" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[2]"
              :src="contentData.default_sub_list[2]"
              class="itemImg"
            />
          </div>
        </div>
      </template>

      <template v-if="contentData.layout === 'top-2-bottom-2'">
        <div class="cube-style cube-style-top-2-bottom-2" :style="gridGapStyle">
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[0]"
              :src="contentData.default_sub_list[0]"
              class="itemImg"
          /></div>
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[1]"
              :src="contentData.default_sub_list[1]"
              class="itemImg"
          /></div>
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[2]"
              :src="contentData.default_sub_list[2]"
              class="itemImg"
          /></div>
          <div class="cube-item" :style="itemStyle">
            <img
              v-if="contentData.default_sub_list[3]"
              :src="contentData.default_sub_list[3]"
              class="itemImg"
          /></div>
        </div>
      </template>

      <template v-if="contentData.layout === 'top-2-bottom-3'">
        <div class="cube-style cube-style-top-2-bottom-3" :style="gridGapStyle">
          <!-- 上面两格 -->
          <div class="cube-row top-row" :style="gridGapStyle">
            <div class="cube-item" :style="itemStyle"
              ><img
                v-if="contentData.default_sub_list[0]"
                :src="contentData.default_sub_list[0]"
                class="itemImg"
            /></div>
            <div class="cube-item" :style="itemStyle">
              <img
                v-if="contentData.default_sub_list[1]"
                :src="contentData.default_sub_list[1]"
                class="itemImg"
              />
            </div>
          </div>

          <!-- 下面三格 -->
          <div class="cube-row bottom-row" :style="gridGapStyle">
            <div class="cube-item" :style="itemStyle"
              ><img
                v-if="contentData.default_sub_list[2]"
                :src="contentData.default_sub_list[2]"
                class="itemImg"
            /></div>
            <div class="cube-item" :style="itemStyle"
              ><img
                v-if="contentData.default_sub_list[3]"
                :src="contentData.default_sub_list[3]"
                class="itemImg"
            /></div>
            <div class="cube-item" :style="itemStyle"
              ><img
                v-if="contentData.default_sub_list[4]"
                :src="contentData.default_sub_list[4]"
                class="itemImg"
            /></div>
          </div>
        </div>
      </template>
    </div>

    <div v-else>
      <img src="@/assets/img/drag/cube_default.png" class="default-img" />
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String,
      default: ''
    }
  })

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      // backgroundColor: s.backgroundColor,
      overflow: 'hidden'
    }
  })

  const gridGapStyle = computed(() => {
    return {
      gap: props.contentData.itemStyle?.gap ? props.contentData.itemStyle.gap + 'px' : 0
    }
  })

  const itemStyle = computed(() => {
    return {
      borderRadius: props.contentData.itemStyle.borderRadius
        ? props.contentData.itemStyle.borderRadius + 'px'
        : 0
    }
  })
</script>

<style scoped lang="scss">
  .cube-box {
    box-sizing: border-box;
  }

  .cube-content {
    width: 100%;
    background-color: transparent;
  }

  //.cube-style {
  //  aspect-ratio: 1 / 1;
  //}

  .cube-style-left-1-right-2,
  .cube-style-left-2-right-1,
  .cube-style-top-1-bottom-2,
  .cube-style-top-2-bottom-1,
  .cube-style-top-2-bottom-2,
  .cube-style-top-2-bottom-3 {
    aspect-ratio: 1 / 1;
  }

  .itemImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cube-style-row-2 {
    display: grid;
    //gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    height: 100%;

    .cube-item {
      display: flex;
      align-items: center;
      overflow: hidden;
    }
  }

  .cube-style-row-3 {
    display: grid;
    //gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .cube-style-top-2-bottom-2 {
    display: grid;
    //gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .cube-style-left-1-right-2 {
    display: grid;
    aspect-ratio: 1 / 1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    //gap: 8px;
    width: 100%;

    .left {
      height: 100%;
      grid-row: span 2;
    }

    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .cube-style-top-1-bottom-2 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
    //gap: 8px;
    aspect-ratio: 1 / 1;
    width: 100%;

    .top {
      grid-column: span 2;
    }

    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .cube-style-left-2-right-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;

    // 右侧的大块
    .right {
      grid-column: 2 / 3;
      grid-row: 1 / 3; // ✅ 跨两行
    }

    .left-top {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    .left-bottom {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .cube-style-top-2-bottom-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    //gap: 8px;
    aspect-ratio: 1 / 1;

    .bottom {
      grid-column: span 2;
    }

    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .cube-style-top-2-bottom-3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    //gap: 6px;
    width: 100%;

    .top-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      //gap: 6px;
    }

    .bottom-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      //gap: 6px;
    }

    .cube-item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }

  .default-img {
    width: 100%;
    height: 300px;
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
